<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    background-color="#212121"
    text-color="#fff"
    active-text-color="#2176ed"
    @select="handleSelect"
  >
    <el-submenu index="chart" popper-class="submenu-inline">
      <template slot="title">
        <i class="el-icon-s-data"></i>
        <span>图表</span>
      </template>
      <el-menu-item index="0">
        <div class="image"><img :src="image.bar" alt="柱形图" /></div>
        <div class="text">柱形图</div>
      </el-menu-item>
      <el-menu-item index="1">
        <div class="image"><img :src="image.line" alt="折线图" /></div>
        <div class="text">折线图</div>
      </el-menu-item>
      <el-menu-item index="2">
        <div class="image"><img :src="image.pie" alt="饼图" /></div>
        <div class="text">饼图</div>
      </el-menu-item>
      <el-menu-item index="3">
        <div class="image"><img :src="image.scatter" alt="散点图" /></div>
        <div class="text">散点图</div>
      </el-menu-item>
      <el-menu-item index="4">
        <div class="image"><img :src="image.pictorial" alt="象形图" /></div>
        <div class="text">象形图</div>
      </el-menu-item>
      <el-menu-item index="5">
        <div class="image"><img :src="image.radar" alt="雷达图" /></div>
        <div class="text">雷达图</div>
      </el-menu-item>
      <el-menu-item index="6">
        <div class="image"><img :src="image.funnel" alt="漏斗图" /></div>
        <div class="text">漏斗图</div>
      </el-menu-item>
      <el-menu-item index="7">
        <div class="image"><img :src="image.gauge" alt="仪表盘" /></div>
        <div class="text">仪表盘</div>
      </el-menu-item>
      <el-menu-item index="8">
        <div class="image"><img :src="image.china" alt="地图" /></div>
        <div class="text">地图</div>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="others" popper-class="submenu-inline">
      <template slot="title">
        <i class="el-icon-collection"></i>
        <span>其他</span>
      </template>
      <el-menu-item index="9">
        <div class="image"><img :src="image.text" alt="通用文本" /></div>
        <div class="text">通用文本</div>
      </el-menu-item>
      <el-menu-item index="10">
        <div class="image"><img :src="image.marquee" alt="滚动文本" /></div>
        <div class="text">滚动文本</div>
      </el-menu-item>
      <el-menu-item index="11">
        <div class="image"><img :src="image.picture" alt="图片样式" /></div>
        <div class="text">图片样式</div>
      </el-menu-item>
      <el-menu-item index="12">
        <div class="image"><img :src="image.table" alt="数据表格" /></div>
        <div class="text">数据表格</div>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
import imageBar from "@/assets/images/widget/bar.jpg";
import imageChina from "@/assets/images/widget/china.jpg";
import imageFunnel from "@/assets/images/widget/funnel.jpg";
import imageGauge from "@/assets/images/widget/gauge.jpg";
import imageLine from "@/assets/images/widget/line.jpg";
import imagePictorial from "@/assets/images/widget/pictorial.jpg";
import imagePie from "@/assets/images/widget/pie.jpg";
import imageRadar from "@/assets/images/widget/radar.jpg";
import imageScatter from "@/assets/images/widget/scatter.jpg";
import imageText from "@/assets/images/widget/text.jpg";
import imageMarquee from "@/assets/images/widget/marquee.jpg";
import imagePicture from "@/assets/images/widget/picture.jpg";
import imageTable from "@/assets/images/widget/table.jpg";
export default {
  data() {
    return {
      image: {
        bar: imageBar,
        china: imageChina,
        funnel: imageFunnel,
        gauge: imageGauge,
        line: imageLine,
        pictorial: imagePictorial,
        pie: imagePie,
        radar: imageRadar,
        scatter: imageScatter,
        text: imageText,
        marquee: imageMarquee,
        picture: imagePicture,
        table: imageTable,
      },
    };
  },
  methods: {
    handleSelect(key) {
      this.$emit("clickMenuItem", key);
    },
  },
};
</script>
<style lang="stylus">
.el-menu--horizontal {
  z-index: 10000 !important;

  .el-menu-item {
    line-height: 45px;
  }

  .el-submenu {
    .el-submenu__title {
      line-height: 45px;
    }
  }
}

.box-tools {
  .el-menu {
    height: 45px;
    border-bottom: none;
    z-index: 10000 !important;
    background-color: #121111 !important;

    .el-menu-item {
      height: 100px;
    }

    .el-submenu {
      width: 117px;
      height: 100%;

      .el-submenu__title {
        height: 45px;
        background-color: #121111 !important;
      }
    }
  }
}

.submenu-inline {
  width: 390px;

  .el-menu {
    .el-menu-item {
      width: 120px;
      height: 100px;
      display: inline-block;
      margin: 5px;

      .image {
        height: 70px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .text {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
    }
  }
}
</style>